<template>
<div>
  <div class="ba_gr ddjz" style="overflow-x: hidden;">
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
    <div class="box">box4</div>
    <div class="box">box5</div>
    <div class="box">box6</div>
    <div class="box">box7</div>
    <div class="box">box8</div>
    <div class="box">box9</div>
    <div class="box">box10</div>
  </div>
</div>
</template>

<script>
export default {
  name: "donghua",
  data() {
    return {
      boxList:[]
    }
  },
  created() {

  },
  mounted() {
    let boxList = document.querySelectorAll('.box')
    window.addEventListener('scroll',scrollLoad)
    function scrollLoad(){
      let taggervalue= window.innerHeight*0.8
      boxList.forEach(box=>{
        let boxTop = box.getBoundingClientRect().top
        console.log(boxTop)
        console.log("🚀")
        if (boxTop<=taggervalue){
          box.classList.add('show-center')
        }else{
          box.classList.remove('show-center')
        }
      })
    }
  },
  // beforeDestroy 与 destroyed 里面移除都行
  destroyed() {

  },
  methods: {

  }
}
</script>

<style scoped>
.box{
  width: 1200px;
  height: 500px;
  background-color: #5296D5;
  border-radius: 8px;
  font-size: 30px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  color: white;
  transition: transform 0.5s;
}
.ddjz>div{
  margin: 0 auto;
  margin-top: 20px;
}
.box:nth-child(even){
  transform: translateX(-200%);
}
.box:nth-child(odd){
  transform: translateX(200%);
  background-color: #735DE8;
}
.box.show-center{
  transform: translateX(0);
}
</style>